<template>
  <div class="container">
    <div class="title">OSB接口调用及设备状态整体监控</div>
    <div class="two-mid-one">
      <div class="one1">
        <img src="../../assets/image/zdycs.png" alt="" />
        <div class="one-title">
          <div class="num">{{ initData.osbWholeMonitor.totalNum }}</div>
          <div class="tip">总调用次数</div>
        </div>
      </div>
      <div class="one2">
        <img src="../../assets/image/sbcs.png" alt="" />
        <div class="one-title">
          <div class="num">{{ initData.osbWholeMonitor.totalFailedNum }}</div>
          <div class="tip">失败次数</div>
        </div>
      </div>
      <div class="one3">
        <img src="../../assets/image/sbl.png" alt="" />
        <div class="one-title">
          <div class="num">{{ initData.osbWholeMonitor.totalFailedPct }}</div>
          <div class="tip">失败率</div>
        </div>
      </div>
      <div class="one4">
        <img src="../../assets/image/cscs.png" alt="" />
        <div class="one-title">
          <div class="num">{{ initData.osbWholeMonitor.totalLongTimeNum }}</div>
          <div class="tip">超时次数</div>
        </div>
      </div>
      <div class="one5">
        <img src="../../assets/image/csl.png" alt="" />
        <div class="one-title">
          <div class="num">{{ initData.osbWholeMonitor.totalLongTimePct }}</div>
          <div class="tip">超时率</div>
        </div>
      </div>
    </div>
    <div id="two-mid-two">
      省公司接口调用次数分布情况
    </div>
    <div class="two-mid-three">
      <div id="two-mid-three-left">
        <div
          :class="['tabs', activeIndex === 0 ? 'active' : '']"
          @click="clickTab(0)"
        >
          10分钟
        </div>
        <div
          :class="['tabs', activeIndex === 1 ? 'active' : '']"
          @click="clickTab(1)"
        >
          30分钟
        </div>
        <div
          :class="['tabs', activeIndex === 2 ? 'active' : '']"
          @click="clickTab(2)"
        >
          一小时
        </div>
        <div
          :class="['tabs', activeIndex === 3 ? 'active' : '']"
          @click="clickTab(3)"
        >
          一天
        </div>
      </div>
      <div id="two-mid-three-right">
        <div class="tips">
          <div class="tips1"></div>
          调用次数
        </div>
        <div class="tips">
          <div class="tips2"></div>
          失败次数
        </div>
        <div class="tips">
          <div class="tips3"></div>
          失败率
        </div>
      </div>
    </div>
    <div id="two-mid-four" ref="twoMidFour"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
import { fontSize } from '../../utils/tools'
export default {
  name: 'twoMid',
  data () {
    return {
      activeIndex: 2,
      t: '',
      twoMidFour: '',
      listData: {
        // totalFailedPct: '18%',
        // totalLongTimePct: '5%',
        // totalFailedNum: 14,
        // totalNum: 74,
        // totalLongTimeNum: 4,
        // oneHour: [
        //   {
        //     province: '北京',
        //     callNum: 13000,
        //     callFailedNum: 245,
        //     callFailedPct: 1.8
        //   },
        //   {
        //     province: '天津',
        //     callNum: 18000,
        //     callFailedNum: 123,
        //     callFailedPct: 1.4
        //   },
        //   {
        //     province: '辽宁',
        //     callNum: 16000,
        //     callFailedNum: 306,
        //     callFailedPct: 1.5
        //   },
        //   {
        //     province: '山西',
        //     callNum: 11000,
        //     callFailedNum: 234,
        //     callFailedPct: 1.6
        //   },
        //   {
        //     province: '河南',
        //     callNum: 15000,
        //     callFailedNum: 103,
        //     callFailedPct: 1.2
        //   }
        // ],
        // oneDay: [
        //   {
        //     province: '北京',
        //     callNum: 13000,
        //     callFailedNum: 245,
        //     callFailedPct: 1.8
        //   },
        //   {
        //     province: '天津',
        //     callNum: 18000,
        //     callFailedNum: 123,
        //     callFailedPct: 1.4
        //   },
        //   {
        //     province: '辽宁',
        //     callNum: 16000,
        //     callFailedNum: 306,
        //     callFailedPct: 1.5
        //   },
        //   {
        //     province: '山西',
        //     callNum: 11000,
        //     callFailedNum: 234,
        //     callFailedPct: 1.6
        //   },
        //   {
        //     province: '河南',
        //     callNum: 15000,
        //     callFailedNum: 103,
        //     callFailedPct: 1.2
        //   }
        // ],
        // tenMinute: [
        //   {
        //     province: '北京',
        //     callNum: 13000,
        //     callFailedNum: 245,
        //     callFailedPct: 1.8
        //   },
        //   {
        //     province: '天津',
        //     callNum: 18000,
        //     callFailedNum: 123,
        //     callFailedPct: 1.4
        //   },
        //   {
        //     province: '辽宁',
        //     callNum: 16000,
        //     callFailedNum: 306,
        //     callFailedPct: 1.5
        //   },
        //   {
        //     province: '山西',
        //     callNum: 11000,
        //     callFailedNum: 234,
        //     callFailedPct: 1.6
        //   },
        //   {
        //     province: '河南',
        //     callNum: 15000,
        //     callFailedNum: 103,
        //     callFailedPct: 1.2
        //   }
        // ],
        // thirtyMinute: [
        //   {
        //     province: '北京',
        //     callNum: 13000,
        //     callFailedNum: 245,
        //     callFailedPct: 1.8
        //   },
        //   {
        //     province: '天津',
        //     callNum: 18000,
        //     callFailedNum: 123,
        //     callFailedPct: 1.4
        //   },
        //   {
        //     province: '辽宁',
        //     callNum: 16000,
        //     callFailedNum: 306,
        //     callFailedPct: 1.5
        //   },
        //   {
        //     province: '山西',
        //     callNum: 11000,
        //     callFailedNum: 234,
        //     callFailedPct: 1.6
        //   },
        //   {
        //     province: '河南',
        //     callNum: 15000,
        //     callFailedNum: 103,
        //     callFailedPct: 1.2
        //   }
        // ]
      }
    }
  },
  watch: {
    listData: {
      handler (newVal, oldVal) {
        if (
          this.twoMidFour !== null &&
          this.twoMidFour !== '' &&
          this.twoMidFour !== undefined
        ) {
          this.twoMidFour.dispose() // 销毁
        }
        this.twoMidFour = echarts.init(this.$refs.twoMidFour)
        this.drawLine(this.twoMidFour)
        this.$forceUpdate()
      },
      deep: true
    },
    activeIndex: {
      immediate: true,
      handler (val) {
        switch (val) {
          case 0:
            return (this.listData = this.initData.osbWholeMonitor.tenMinute)
          case 1:
            return (this.listData = this.initData.osbWholeMonitor.thirtyMinute)
          case 2:
            return (this.listData = this.initData.osbWholeMonitor.oneHour)
          case 3:
            return (this.listData = this.initData.osbWholeMonitor.oneDay)
          case 4:
            return (this.activeIndex = 0)
          default:
            return (this.listData = this.initData.osbWholeMonitor.tenMinute)
        }
      }
    }
  },
  computed: {
    ...mapState(['initData'])
  },
  created () {
    let that = this
    that.t = setInterval(function () {
      // console.log('123')
      that.activeIndex++
      // if (that.activeIndex === 4) {
      //   that.activeIndex = 0
      // }
    }, 2000)
    console.log(that.t)
  },
  mounted () {
    // console.log(this.$refs.twoMidFour)
    this.twoMidFour = echarts.init(this.$refs.twoMidFour)
    this.drawLine(this.twoMidFour)
    window.addEventListener('resize', () => {
      this.twoMidFour.resize()
    })
    this.$forceUpdate()
  },
  destroyed () {
    clearInterval(this.t)
  },
  methods: {
    clickTab (val) {
      let that = this
      console.log(val)
      clearInterval(this.t)
      this.activeIndex = val
      that.t = setInterval(function () {
        that.activeIndex++
        // if (that.activeIndex === 4) {
        //   that.activeIndex = 0
        // }
      }, 2000)
      console.log(that.t)
    },
    drawLine (name) {
      let data1 = this.listData.map(({ province }) => {
        return province
      })
      let data2 = this.listData.map(({ callNum }) => {
        return callNum
      })
      let data3 = this.listData.map(({ callFailedNum }) => {
        return callFailedNum
      })
      let data4 = this.listData.map(({ callFailedPct }) => {
        return callFailedPct
      })
      let max = this.initData.osbWholeMonitor.maxNum
      // console.log(data1)
      // console.log(data2)
      // console.log(data3)
      // console.log(data4)
      let myChart = name
      let option
      option = {
        // backgroundColor: 'rgba(19, 52, 89, .5)',
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   // backgroundColor: 'rgba(9, 24, 48, 0.5)',
        //   borderColor: 'rgba(75, 253, 238, 0.4)',
        //   textStyle: {
        //     color: '#CFE3FC'
        //   },
        //   borderWidth: 1,
        //   formatter: function (params) {
        //     let str = ''
        //     for (let i = 0; i < params.length; i++) {
        //       if (i === 0) {
        //         str += `${params[i].name}<br/>${params[i].seriesName.slice(
        //           0,
        //           params[i].seriesName.indexOf('(')
        //         )}<br/><span>${params[0].data}</span>%<br/>`
        //         continue
        //       }
        //       str += `${params[i].seriesName.slice(
        //         0,
        //         params[i].seriesName.indexOf('(')
        //       )}<br/><span>${params[i].data}</span>个<br/>`
        //     }
        //     return str
        //   }
        // },
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '0px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(17, 53, 107, 1)',
                width: fontSize(3)
              }
            },
            data: data1,
            // data: [
            //   '西城',
            //   '顺义',
            //   '朝阳',
            //   '大兴',
            //   '海淀',
            //   '昌平',
            //   '西城',
            //   '东城',
            //   '丰台'
            // ],
            axisLabel: {
              interval: 0,
              color: 'rgba(207, 227, 252, 1)',
              fontSize: fontSize(25),
              formatter: function (value) {
                return value.split('').join('\n')
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',

            axisTick: {
              show: false
            },
            // max: 120,
            axisLabel: {
              interval: 0,
              color: 'rgba(207, 227, 252, 1)',
              fontSize: fontSize(18)
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(17, 53, 107, 1)',
                width: fontSize(2),
                type: 'solid'
              }
            }
          },
          {
            type: 'value',
            axisTick: {
              show: false
            },
            min: 0,
            max: max,
            axisLabel: {
              interval: 0,
              fontSize: fontSize(16),
              color: 'rgba(207, 227, 252, 1)',
              formatter: '{value} %'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(39, 57, 75, 1)',
                width: fontSize(1),
                type: 'solid'
              }
            }
          }
        ],
        series: [
          {
            name: '办结率(%)',
            yAxisIndex: 1,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(98, 227, 255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(98, 227, 255, 0)'
                }
              ])
            },
            // data: [30, 50, 53, 42, 66, 71, 20, 80, 20],
            data: data4,
            symbol: 'circle',
            label: {
              show: true,
              color: 'white',
              fontSize: fontSize(15),
              formatter: '{c}%'
            },
            symbolSize: fontSize(8),
            itemStyle: {
              normal: {
                color: '#FFFFFF',
                borderColor: 'rgba(0, 255, 240, 1)',
                lineStyle: {
                  color: 'rgba(0, 255, 240, 1)'
                }
              }
            }
          },
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: 'white',
              fontSize: fontSize(15)
            },
            yAxisIndex: 0,
            name: '问题个数(个)',
            itemStyle: {
              color: '#66e2e2',
              borderRadius: [fontSize(12), fontSize(12), 0, 0]
            },
            barWidth: fontSize(12),
            // data: [12, 23, 21, 32, 24, 35, 33, 22, 32]
            data: data2
          },
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: 'white',
              fontSize: fontSize(15)
            },
            yAxisIndex: 0,
            name: '办结量(个)',
            itemStyle: {
              color: '#ffbd56',
              borderRadius: [fontSize(12), fontSize(12), 0, 0]
            },
            barWidth: fontSize(12),
            data: data3
            // data: [22, 33, 11, 12, 14, 15, 23, 42, 12]
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  // background: rgba(0, 0, 0, 0.3);
  // border: 1px solid #000;
  .title {
    width: 2600px;
    height: 150px;
    font-size: 90px;
    font-family: SourceHanSerifSC-Heavy, SourceHanSerifSC;
    font-weight: 800;
    color: #b4fdfc;
    line-height: 108px;
    text-align: center;
    margin-top: -80px;
  }
  .two-mid-one {
    height: 175px;
    // width: 100%;
    margin-left: 8%;
    margin-right: 8%;
    // padding-top: 3%;
    // padding-bottom: 3%;
    margin-top: 150px;
    margin-bottom: 85px;
    // margin-bottom: 84px;
    // border: 1px solid #000;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > div {
      width: 470px;
      height: 175px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // border-right: 1px solid #000;
      &::after {
        content: '';
        display: block;
        width: 4px;
        height: 175px;
        background: url('../../assets/image/midLine.png') no-repeat 0px 0px;
        background-size: 100% 100%;
      }
      &:last-child {
        border-right: 0;
        &::after {
          content: '';
          display: block;
          width: 0px;
          height: 0px;
        }
      }
      img {
        width: 200px;
        height: 144px;
        margin-left: 20px;
      }
      .one-title {
        box-sizing: border-box;
        width: 200px;
        height: 144px;
        // margin-left: 5px;
        margin-right: 10px;
        text-align: center;
        // border: 1px solid #000;
        padding-top: 30px;
        .num {
          color: #51f3f1;
          font-size: 50px;
          height: 42px;
          line-height: 42px;
        }
        .tip {
          color: white;
          font-size: 35px;
          height: 72px;
          line-height: 72px;
        }
      }
    }
  }
  #two-mid-two {
    height: 122px;
    width: 2300px;
    margin: auto;
    // border: 1px solid #000;
    margin-bottom: 110px;
    background: url('../../assets/image/jkfbbtbg.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    font-size: 50px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #55e2ff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .two-mid-three {
    height: 90px;
    width: 2600px;
    // border: 1px solid #000;
    margin: auto;
    // background: rgba(16, 68, 99, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    #two-mid-three-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 80px;
      // width: 40%;
      // height: 100%;
      //   border: 1px solid #000;
      .tabs {
        width: 250px;
        height: 90px;
        margin-right: 70px;
        // border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #acd7e8;
        // background:;
        background: url('../../assets/image/notSelected.png') no-repeat 0px 0px;
        background-size: 100% 100%;
        &.active {
          color: #51f3f1;
          background: url('../../assets/image/selected.png') no-repeat 0px 0px;
          background-size: 100% 100%;
        }
      }
    }
    #two-mid-three-right {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      // width: 40%;
      width: 724px;
      height: 90px;
      //   border: 1px solid #000;

      .tips {
        // width: 30%;
        // height: 40%;
        // border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        color: white;
        .tips1 {
          width: 30px;
          height: 30px;
          margin-right: 15px;
          background: #51f3f1;
        }
        .tips2 {
          width: 30px;
          height: 30px;
          margin-right: 15px;
          background: #ffbd56;
        }
        .tips3 {
          width: 30px;
          height: 8px;
          margin-right: 15px;
          background: #6ff0f4;
          border-radius: 5px;
        }
      }
    }
  }
  #two-mid-four {
    height: 55%;
    width: 100%;
    // background: rgba(16, 68, 99, 0.3);
  }
}
</style>
